<template>
  <div>
    <basic-layout title="物资发放" :showAddBtn="false"
                  @handleFilter="$refs.queryPopupRef.show = true">

      <van-tabs v-model:active="active" @click="tabClick">
        <van-tab title="办公物资"></van-tab>
        <van-tab title="服务设备"></van-tab>
      </van-tabs>
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          style="min-height: 100%;"
          class="cardVanPullRefresh"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            class="vanList"
            finished-text="已经到底"
            @load="nextPage"
          >
            <div v-for="item in dataList" class="dataStyle" @click="jumpToDistributionList(item)">
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ item.DANH }}</span>
                  </div>
                  <div class="dh">
                    <span style="color: #aaa">{{ item.DISGS }}</span>
                    <div class="aImgStyle1">
                      <span v-if="item.SHENQZT == '06'" style="color: red">已领用</span>
                      <span class="imgStyle" v-else style="color: #aaaaaa">未领用</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">申请人:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.SQRNAME
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">领用人:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.SSRYNAME
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">申请时间:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.SHENQSJ
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">已发放数量:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.YFSL
                  }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span style="color:#aaa;">总数量：:&nbsp;&nbsp;&nbsp;&nbsp; </span>{{item.ZONGS}}
                </div>
                <div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-row>
      <!-- 列表 -->
    </basic-layout>
  </div>
</template>
<script>
import { queryWuzff } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      title: '物资发放',
      active: 0,
      dataList: [],
      loading: false,
      isLoading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        orderStatus: null,
        alert: null,
        planDate: null,
        pageIndex: 1,
        pageSize: 10,
        type: '04',
      },
    }
  },

  created () {
    this.initData()
  },

  methods: {
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      let res = await queryWuzff(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    tabClick (val) {
      if (val == 0) {
        this.queryParam.type = '04'
      } else {
        this.queryParam.type = '05'
      }
      this.dataList = []
      this.initData()
    },

    jumpToDistributionList (item) {
      item.type = this.queryParam.type
      this.$router.push({
        path: '/materialDistribution/distributionList',
        query: {
          dataInfo: item,
        }
      })
    },
  }
}
</script>

<style scoped lang="less">

.listCard {
  background-color: #8080803b;
  min-height: 100%;
  .cardVanPullRefresh {

    .dataStyle {
      min-height: 100%;
      //height: 3.8667rem;
      margin: 10px;
      background-color: #FFFFFF;
      line-height: 23px;
      border-radius: 3px;
      font-size: 0.4rem;
      .downOtherProcess {
        width: 80%;
        float: left;
        transform: translateX(10px);
      }
      .downOtherPercentageStyle{
        transform: translateY(-5px);
        transform: translateX(19px);
        line-height: 0.41333rem;
        width: 100%;
      }
      .hengXian {
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        line-height: 0.64rem;
      }

      .dataBStyle {
        height: 55px;
        position: relative;

        .listLeft {
          margin-left: 10px;
          font-size: 0.4rem;
          font-weight: bold;
          padding-top: 9px;

          .ziti {
            margin-top: 1px;
          }

        }

        .dh {
          margin-left: 10px;
          font-size: 0.3rem;

          .aImgStyle1 {
            position: absolute;
            top: 0.4667rem;
            right: 0.4rem;
            font-size: 15px;
            margin-left: 78%;
          }
        }
      }


      .listMain {
        line-height: 29px;
        position: relative;
        .downOtherText {
          transform: translateY(-5px);
          width: 100%;
        }
      }
    }

    /deep/ .van-progress__pivot {
      display: none;
    }

    /deep/ .van-progress {
      height: 11px;
      margin-top: 4px;
    }

    .custom-image {
      height: 100%;
    }
  }
}



/deep/ .van-tabs__line {
  background: #4eb3e9;
}

/deep/ .van-tabs__nav {
  background-color: #FFFFFF;
}

/deep/ .van-progress__pivot {

  display: none;
}
.van-list__placeholder {
  height: 200px;
}
/deep/ .van-progress {
  height: 11px;
  margin-top: 4px;
}

</style>
